<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教师列表</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/formSelects/formSelects-v4.css"/>
</head>
<style>
    .layui-inline{
        margin-bottom: 10px;
    }
</style>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">所属机构:</label>
                        <div class="layui-input-inline">
                            <select name="organizationId" id="organizationId"  lay-verType="tips"
                                    lay-filter="organization">
                                <option value="">全部</option>
                                <% for(organizations in organizationsList) { %>
                                <option value="${organizations.id}">${organizations.organizationName}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">所属校区:</label>
                        <div class="layui-input-inline">
                            <select name="schoolId" id="schoolId" lay-verType="tips" lay-filter="school">
                                <option value="">全部</option>
                                <% for(school in schoolList) { %>
                                <option value="${school.id}">${school.schoolName}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">所属班级:</label>

                        <div class="layui-input-inline">
                            <select name="classId" id="classId">
                                <option value="">全部</option>
                                <% for(classs in classsList) { %>
                                <option value="${classs.id}">${classs.className}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">关键词:</label>
                        <div class="layui-input-inline mr0">
                            <input id="keyWords" class="layui-input" type="text" placeholder="姓名/手机号"/>
                        </div>
                    </div>
                </div>

                <div class="layui-inline" >
                    <label class="layui-form-label">提交时间:</label>
                    <div class="layui-input-inline" style="width: 230px">
                        <input type="text" class="layui-input date-icon" id="searchDate" placeholder="请选择提交时间">
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                </div>

                <div class="layui-form-item audit" style="margin-top: 20px">
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                    <button id="btnDelete" class="layui-btn icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>
                    <!--<a id="btnDownloadModel" class="layui-btn icon-btn" href="http://linnei.oss-cn-shanghai.aliyuncs.com/images/1613984558901.xlsx"><i class="layui-icon">&#xe663;</i>下载模板</a>
                    <button id="btnImport" class="layui-btn icon-btn"><i class="layui-icon">&#xe62f;</i>导入</button>
                    <button id="btnExport" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>-->
                </div>


                <div class="layui-form-item" style="margin-top: 10px">
                    <table class="layui-table" id="childTable" lay-filter="childTable" style="margin-top: 30px"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="childTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="tableState">
    <input type="checkbox" lay-filter="ckState" value="{{d.childId}}" lay-skin="switch"
           lay-text="开|关" {{d.status==0?'checked':''}}/>
</script>

<!-- 编辑 表单弹窗 -->
<script type="text/html" id="childEditLayer">
    <form id="childForm" lay-filter="childForm" class="layui-form model-form"
          style="margin-left: 20px;height: 500px">
        <input name="childId" type="hidden"/>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>教师姓名:</label>
            <div class="layui-input-block">
                <input name="childName" placeholder="请输入" type="text" class="layui-input"
                       lay-verType="tips" lay-verify="required" required autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">英文名称:</label>
            <div class="layui-input-block">
                <input name="englishName" placeholder="请输入" type="text" class="layui-input"
                        autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>教师性别</label>
            <div class="layui-input-block">
                <input name="sex" value="1" type="radio" title="男" checked="">
                <input name="sex" value="2" type="radio" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>手机号:</label>
            <div class="layui-input-block">
                <input name="telNo" placeholder="请输入" type="text" class="layui-input"
                       lay-verType="tips" lay-verify="phone" required autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>所属机构:</label>
            <div class="layui-input-block">
                <select name="organizationId" id="editOrganizationId" lay-verType="tips" lay-verify="required" lay-filter="editOrganization">
                    <option value="">请选择</option>
                    <% for(organization in organizationsList) { %>
                    <option value="${organization.id}">${organization.organizationName}</option>
                    <% } %>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>所属校区:</label>
            <div class="layui-input-block">
                <select name="schoolId" id="editSchoolId" lay-verType="tips" lay-verify="required" lay-filter="editSchool">
                    <option value="">请选择</option>
                    <% for(school in schoolList) { %>
                    <option value="${school.id}">${school.schoolName}</option>
                    <% } %>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>所属班级:</label>
            <div class="layui-input-block">
                <select name="classId" id="editClassId" lay-verType="tips" lay-verify="required">
                    <option value="">请选择</option>
                    <% for(classs in classsList) { %>
                    <option value="${classs.id}">${classs.className}</option>
                    <% } %>
                </select>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="childFormSubmit" lay-submit>确定</button>
        </div>

    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>

<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate', 'upload', 'jquery', 'formSelects' ,'excel'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var formSelects = layui.formSelects;
        window.excel = layui.excel;

        var cols = [
            {field: 'childName', title: '教师姓名'},
            {field: 'englishName', title: '英文名称'},
            {field: 'organizationName', title: '所属机构' , width:200},
            {field: 'schoolName', title: '所属校区' , width:200},
            {field: 'className', title: '所属班级' , width:200},
            {field: 'telNo', title: '手机号' , width:200}
        ];


        //日期
        laydate.render({elem: '#searchDate', range: true});

        var insTb = table.render({
            elem: '#childTable',
            url: 'teacher/teacherList',
            page: true,
            cellMinWidth: 100,
            title: '教师列表',
            text: {none: '暂无数据'},
            cols: [[
                {type: 'checkbox'},
                {field: 'childId', title: 'childId' , width:50,hide: true},
                {field: 'childName', title: '教师姓名'},
                {field: 'englishName', title: '英文名称'},
                {field: 'organizationName', title: '所属机构' , width:200},
                {field: 'schoolName', title: '所属校区' , width:200},
                {field: 'className', title: '所属班级' , width:200},
                {field: 'telNo', title: '手机号' , width:200},
                {align: 'center', toolbar: '#childTableBar',width: 200}
            ]],
            done: function (res) {
                exportData = res.data;
            }
        });


        //搜索
        $('#btnSearch').click(function () {
            var organizationId = $('#organizationId').val();
            var schoolId = $('#schoolId').val();
            var classId = $('#classId').val();
            var keyWords = $('#keyWords').val();
            var status = $('#status').val();
            var searchDate = $('#searchDate').val();
            var startDate = searchDate.substring(0, 10);
            var endDate = searchDate.substring(13);


            console.log(keyWords);
            //insTb.reload({where: where() });
            insTb.reload({
                where: {
                    organizationId: organizationId,
                    schoolId: schoolId,
                    classId: classId,
                    keyWords: keyWords,
                    status: status,
                    startDate: startDate,
                    endDate: endDate + " 23:59:59"
                }
            });
        });

        // 重置
        $('#btnReset').click(function () {
            $("#classId").val("");
            $("#schoolId").val("");
            $("#organizationId").val("");
            $("#keyWords").val("");
            $("#status").val("");
            $("#searchDate").val("");
            window.location.reload();
        });

        // 新增
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(childTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            switch (layEvent) {
                // 修改
                case 'edit':
                    showEditModel(data);
                    break;
            }
        });

        //选择机构后筛选所负责的校区
        form.on('select(organization)', function (data) {
            changeSchool();
        });

        form.on('select(school)', function (data) {
            changeClasss();
        });

        form.on('select(editOrganization)', function (data) {
            changeEditSchool();
        });

        form.on('select(editSchool)', function (data) {
            changeEditClass();
        });

        function changeSchool() {
            $("#schoolId").empty();
            $("#classId").empty();
            form.render("select");//重新渲染 固定写法
            var organizationId=$("#organizationId").val();
            if(organizationId!=null && organizationId!=""){
                $.ajax({
                    url: '/admin/school/getListByOrganizationId?organizationId='+ organizationId,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#schoolId').append(new Option("全部", ""));// 下拉菜单里添加元素
                        $('#classId').append(new Option("全部", ""));// 下拉菜单里添加元素
                        $.each(data, function (index, item) {
                            $('#schoolId').append(new Option(item.schoolName, item.id));// 下拉菜单里添加元素
                        });
                        form.render("select");//重新渲染 固定写法
                    }
                });
            }
        }

        function changeClasss() {
            $("#classId").empty();
            form.render("select");//重新渲染 固定写法
            var schoolId=$("#schoolId").val();
            if(schoolId!=null && schoolId!=""){
                $.ajax({
                    url: '/classs/getListBySchoolId?schoolId='+ schoolId,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#classId').append(new Option("全部", ""));// 下拉菜单里添加元素
                        $.each(data, function (index, item) {
                            $('#classId').append(new Option(item.className, item.id));// 下拉菜单里添加元素
                        });
                        form.render("select");//重新渲染 固定写法
                    }
                });
            }
        }


        function changeEditSchool() {
            $("#editSchoolId").empty();
            $("#editClassId").empty();
            form.render("select");//重新渲染 固定写法
            var organizationId=$("#editOrganizationId").val();
            if(organizationId!=null && organizationId!=""){
                $.ajax({
                    url: '/admin/school/getListByOrganizationId?organizationId='+ organizationId,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#editSchoolId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                        $('#editClassId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                        $.each(data, function (index, item) {
                            $('#editSchoolId').append(new Option(item.schoolName, item.id));// 下拉菜单里添加元素
                        });
                        form.render("select");//重新渲染 固定写法
                    }
                });
            }
        }

        function changeEditClass() {
            $("#editClassId").empty();
            form.render("select");//重新渲染 固定写法
            var schoolId=$("#editSchoolId").val();
            if(schoolId!=null && schoolId!=""){
                $.ajax({
                    url: '/classs/getListBySchoolId?schoolId='+ schoolId,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#editClassId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                        $.each(data, function (index, item) {
                            $('#editClassId').append(new Option(item.className, item.id));// 下拉菜单里添加元素
                        });
                        form.render("select");//重新渲染 固定写法
                    }
                });
            }
        }

        // 显示表单弹窗
        function showEditModel(child) {
            admin.open({
                type: 1,
                area: ['700px', '500px'],
                title: (child ? '编辑' : '新增') + '学员',
                content: $('#childEditLayer').html(),
                success: function (layero, dIndex) {
                    console.log(1);
                    var url = child ? '/admin/teacher/update' : '/admin/teacher/add';
                    // 回显数据
                    if (child) {
                        $('#editSchoolId').empty();
                        $('#editClassId').empty();
                        if(child.organizationId!=null && child.organizationId!=""){
                            $.ajax({
                                url: '/admin/school/getListByOrganizationId?organizationId='+ child.organizationId,
                                dataType: 'json',
                                type: 'get',
                                cache:false,
                                async:false,
                                success: function (data) {
                                    $('#editSchoolId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                                    $.each(data, function (index, item) {
                                        $('#editSchoolId').append(new Option(item.schoolName, item.id));// 下拉菜单里添加元素
                                    });
                                    form.render("select");//重新渲染 固定写法
                                }
                            });
                        }else{
                            $('#editSchoolId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                            $('#editSchoolId').append(new Option(child.schoolName, child.schoolId));// 下拉菜单里添加元素
                            form.render("select");//重新渲染 固定写法
                        }

                        if(child.schoolId!=null && child.schoolId!=""){
                            $.ajax({
                                url: '/classs/getListBySchoolId?schoolId='+ child.schoolId,
                                dataType: 'json',
                                type: 'get',
                                cache:false,
                                async:false,
                                success: function (data) {
                                    $('#editClassId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                                    $.each(data, function (index, item) {
                                        $('#editClassId').append(new Option(item.className, item.id));// 下拉菜单里添加元素
                                    });
                                    form.render("select");//重新渲染 固定写法
                                }
                            });
                        }else{
                            $('#editClassId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                            $('#editClassId').append(new Option(child.className, child.classId));// 下拉菜单里添加元素
                            form.render("select");//重新渲染 固定写法
                        }
                        form.val('childForm', child);
                    }

                    form.render();

                    //上传文件
                    upload.render({
                        elem: '#adImg',
                        url: '/upload/uploadFile',
                        accept: 'images',
                        done: function (res) {
                            if (res.msg == null) {
                                return layer.msg('上传失败', {icon: 2});
                            }
                            $('#adPicUrl').attr('src', res.msg);//进行图片回显
                            $('#picUrl').val(res.msg);
                        }
                    });
                    form.on('submit(childFormSubmit)', function (data) {
                        layer.close(dIndex);

                        ajaxCommon(url, data.field);

                        insTb.reload();
                        return false;
                    });
                }
            });
        }

        // 修改用户状态
        form.on('switch(ckState)', function (obj) {
            layer.load(2);
            $.post('teacher/updateState', {
                childId: obj.elem.value,
                state: obj.elem.checked ? 0 : 1
            }, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    if(obj.elem.checked==0){
                        $("#update-class-"+obj.elem.value).css('display', '');
                    }else{
                        $("#update-class-"+obj.elem.value).css('display', 'none');
                    }
                } else {
                    layer.msg(res.msg, {icon: 2});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        });

        // 删除
        $('#btnDelete').click(function () {
            var checkStatus = table.checkStatus('childTable'),
                data = checkStatus.data; //获取选中的数据
            deleteChilds(data);
        });

        //删除学员
        function deleteChilds(data) {
            if(data.length === 0){
                layer.msg('请选择一行');
            } else {
                layer.confirm('确定要删除' + data.length  + '条数据吗？',{
                        skin: 'layui-layer-admin'
                    }, function (i) {
                        top.layer.close(i);
                        layer.load(2);
                        var childIds=getChildIds(data);
                        $.post('/admin/teacher/deleteIds', {
                            teacherIds: childIds
                        }, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                                //obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                    }
                );
            }
        }

        //获取删除的儿童id
        function getChildIds(data){
            var arr = new Array();;
            for(var i = 0;i<data.length;i++){
                arr.push(data[i]['childId']);
            }
            return arr.join(",");
        }

        //导出
        /*$("#btnExport").click(function () {
            table.exportFile(insTb.config.id, exportData, 'xls');
        });*/




        //导出
        $("#btnExport").click(function(){

            var organizationId = $('#organizationId').val();
            var schoolId = $('#schoolId').val();
            var classId = $('#classId').val();
            var keyWords = $('#keyWords').val();
            var status = $('#status').val();
            var searchDate = $('#searchDate').val();
            var startDate = searchDate.substring(0, 10);
            var endDate = searchDate.substring(13);
            var where = ()=> ({
                organizationId: organizationId,
                schoolId: schoolId,
                classId: classId,
                keyWords: keyWords,
                status: status,
                startDate: startDate,
                endDate: endDate + " 23:59:59"
            }) ;
            var data = where();
            data.page = 1;
            data.limit = 999999999;//不分页
            toGet("teacher/teacherList",data,function(res){
                var [t,f] = [{},[]];//标题/字段;
                var DATA = res.data;
                $(cols).each(function(k,v){
                    t[v.field]=v.title;
                    f.push(v.field);
                });
                console.table(DATA);
                // 重点！！！如果后端给的数据顺序和映射关系不对，请执行梳理函数后导出
                DATA = excel.filterExportData(DATA,f);
                // 重点2！！！一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致
                DATA.unshift(t);
                excel.exportExcel(DATA, '学员列表'+(data.limitTime||"")+'.xlsx', 'xlsx');
                //console.log(col);
                console.table(DATA);
            });

        });

        // 导入
        upload.render({
            elem:"#btnImport",
            url: "teacher/importTeacher",
            data:{},
            accept:"file",
            acceptMime: ".xls,.xlsx",
            field:"file",
            multiple:false,
            before: x => top.layer.load(3),
            error: x => top.layer.closeAll("loading"),
            done: function(res){
            let isOk = [0,200].includes(res.code);
            top.layer.closeAll("loading");
            top.layer.msg(res.msg, {icon: isOk ? 1 :2});
            if(isOk)location.reload();
            }
        });

        function toGet(url,data,callback){
            top.layer.load(2);
            $.get(url, data , function (res) {
                top.layer.closeAll('loading');
                if(res.msg)layer.msg(res.msg, {icon: !res.code ? 1 :2});
                if(!res.code&&callback)callback(res);
            }, 'json');
        }

    })

</script>

</body>
</html>